<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Gulp的使用 | My NoteBook</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        <meta name="author" content="Eagle">
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-sectionx/sectionx.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../md/gitbook.html" />
    
    
    <link rel="prev" href="../md/git.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="7"
        data-chapter-title="Gulp的使用"
        data-filepath="md/gulp.md"
        data-basepath=".."
        data-revision="Fri Jan 26 2018 15:02:18 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/1-css.html">
            
                
                    <a href="../md/1-css.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        css引入方式
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="2" data-path="md/element.html">
            
                
                    <a href="../md/element.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        元素关系
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/weilei.html">
            
                
                    <a href="../md/weilei.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        伪类选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/xzf.html">
            
                
                    <a href="../md/xzf.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        属性选择器&amp;伪对象选择器
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="5" data-path="md/sass.html">
            
                
                    <a href="../md/sass.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        sass的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="6" data-path="md/git.html">
            
                
                    <a href="../md/git.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        Git的使用
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="7" data-path="md/gulp.html">
            
                
                    <a href="../md/gulp.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                        Gulp的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="8" data-path="md/gitbook.html">
            
                
                    <a href="../md/gitbook.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        gitbook的使用
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="9" data-path="md/other.html">
            
                
                    <a href="../md/other.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        小知识点
                    </a>
            
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >My NoteBook</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h3 id="gulp&#x7684;&#x5B66;&#x4E60;">Gulp&#x7684;&#x5B66;&#x4E60;</h3>
<h4 id="&#x4EC0;&#x4E48;&#x662F;gulp">&#x4EC0;&#x4E48;&#x662F;gulp</h4>
<p>&#x81EA;&#x52A8;&#x5316;&#x5904;&#x7406;&#x5DE5;&#x5177;&#x7684;&#x5E73;&#x53F0;&#xFF0C;&#x81EA;&#x52A8;&#x3001;&#x9AD8;&#x6548;&#x3001;&#x5E26;&#x611F;&#x3002;
&#x5177;&#x5907;&#x529F;&#x80FD;&#xFF1A;
-&#x56FE;&#x7247;&#x7684;&#x5904;&#x7406;&#xFF1A;&#x538B;&#x7F29;&#x4F18;&#x5316;
-css&#x7684;&#x538B;&#x7F29;&#xFF0C;&#x81EA;&#x52A8;&#x9884;&#x7F16;&#x8BD1;&#xFF0C;&#x517C;&#x5BB9;&#x5904;&#x7406;
-js&#x7684;&#x538B;&#x7F29;&#xFF0C;&#x52A0;&#x5BC6;
-html&#x538B;&#x7F29;
-&#x540C;&#x6B65;&#x6D4F;&#x89C8;&#x529F;&#x80FD;
-&#x6587;&#x4EF6;&#x7684;&#x5E38;&#x89C4;&#x64CD;&#x4F5C;
-&#x3002;&#x3002;&#x3002;
gulp&#x529F;&#x80FD;&#x7684;&#x5B9E;&#x73B0;&#x662F;&#x5229;&#x7528;&#x5B83;&#x7684;&#x63D2;&#x4EF6;&#x6765;&#x5B9E;&#x73B0;&#x3002;
gulp&#x7684;&#x6838;&#x5FC3;&#x529F;&#x80FD;&#x662F;&#x65B9;&#x4FBF;&#x5F00;&#x53D1;&#x8005;&#x5F00;&#x53D1;&#x548C;&#x53D1;&#x5E03;&#x6700;&#x7EC8;&#x4EA7;&#x54C1;&#x3002;</p>
<h3 id="&#x5B89;&#x88C5;gulp">&#x5B89;&#x88C5;gulp</h3>
<p>0.&#x5B89;&#x88C5;node+npm</p>
<pre><code>   npm -v  //&#x68C0;&#x67E5;npm&#x7248;&#x672C;&#x53F7;
</code></pre><p>1.&#x5B89;&#x88C5;&#x5168;&#x5C40;gulp</p>
<pre><code>    npm install gulp-cli -g
    gulp -v //&#x68C0;&#x67E5;&#x7248;&#x672C;&#x53F7;
</code></pre><p>2.cd&#x5230;&#x5F00;&#x53D1;&#x9879;&#x76EE;&#x4E0B;&#xFF0C;&#x5B89;&#x88C5;&#x672C;&#x5730;gulp</p>
<pre><code>   cnpm install gulp -D
</code></pre><pre><code>&#x76EE;&#x5F55;&#x4E0B;&#x4F1A;&#x51FA;&#x73B0;`node_modules`&#x548C;`packpage.json`
&#x5982;&#x679C;&#x6CA1;&#x6709;&#x81EA;&#x52A8;&#x751F;&#x6210;&#x4E00;&#x4E2A;packpage.json&#x6587;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x6267;&#x884C;`npm init -y`
</code></pre><h3 id="gulp&#x7684;&#x4F7F;&#x7528;">gulp&#x7684;&#x4F7F;&#x7528;</h3>
<p>1.&#x521B;&#x5EFA;gulpfile.js
2.&#x9700;&#x8981;&#x4EC0;&#x4E48;&#x63D2;&#x4EF6;&#xFF0C;&#x5C31;&#x5B89;&#x88C5;&#x4EC0;&#x4E48;&#x63D2;&#x4EF6;<code>npm install gulp-xx -D</code>
        <code>-D</code>&#x7684;&#x4F5C;&#x7528;&#x662F;&#x8BB0;&#x5F55;&#x4F60;&#x7684;&#x63D2;&#x4EF6;&#x5217;&#x8868;&#xFF0C;&#x65B9;&#x4FBF;&#x4E0B;&#x6B21;&#x5B89;&#x88C5;<code>npm install</code>
3.&#x5B89;&#x88C5;&#x63D2;&#x4EF6;&#x540E;&#xFF0C;&#x53EF;&#x4EE5;&#x5F15;&#x5165;&#x63D2;&#x4EF6;&#xFF0C;&#x5B9A;&#x4E49;&#x4EFB;&#x52A1;</p>
<pre><code>    var gulp = require(&quot;gulp&quot;);
    var gulp_xx = require(&quot;gulp-xx&quot;);

    gulp.task(&quot;name&quot;,function(){
        gulp.src(&quot;&#x76EE;&#x5F55;/&#x6587;&#x4EF6;&quot;)//&#x83B7;&#x53D6;&#x6E90;&#x6587;&#x4EF6;
            .pipe(gulp_xx())
            .pipe(gulp.dest(&quot;&#x8F93;&#x51FA;&#x7684;&#x6587;&#x4EF6;&#x76EE;&#x5F55;&quot;))
    })
</code></pre><p>4.&#x8C03;&#x7528;&#x4EFB;&#x52A1; cmd&#x4E0B;</p>
<pre><code>    gulp name
</code></pre><h3 id="&#x5E38;&#x7528;&#x63D2;&#x4EF6;">&#x5E38;&#x7528;&#x63D2;&#x4EF6;</h3>
<pre><code>&quot;devDependencies&quot;: {
    &quot;browser-sync&quot;: &quot;^2.23.2&quot;,
    &quot;gulp&quot;: &quot;^3.9.1&quot;,
    &quot;gulp-minify-css&quot;: &quot;^1.2.4&quot;,
    &quot;gulp-plumber&quot;: &quot;^1.1.0&quot;,
    &quot;gulp-pngmin&quot;: &quot;^0.2.1&quot;,
    &quot;gulp-sass&quot;: &quot;^3.1.0&quot;,
    &quot;gulp-tinypng&quot;: &quot;^1.0.2&quot;,
    &quot;gulp-uglify&quot;: &quot;^3.0.0&quot;
  }
</code></pre><p>1.browser-sync</p>
<pre><code>    cmd&#x4E0B;&#xFF1A;npm install browser-sync --save-dev

js&#x6587;&#x4EF6;&#xFF1A;
var gulp = require(&quot;gulp&quot;);
var browser_sync = require(&quot;browser-sync&quot;).create();
//&#x81EA;&#x52A8;&#x5237;&#x65B0;&#x6D4F;&#x89C8;&#x5668;
gulp.task(&apos;bsync&apos;, function() {
    browser_sync.init({
        server: {
            baseDir: &quot;./&quot;   //&#x6839;&#x5730;&#x5740;
        }
    });
    gulp.watch(&quot;sass/**/*.scss&quot;,[&apos;mincss&apos;]).on(&quot;change&quot;, browser_sync.reload);//&#x76D1;&#x542C;&#x76F8;&#x5173;&#x7684;sass&#x6216;css&#x6587;&#x4EF6;&#xFF1B;
    gulp.watch(&quot;*.html&quot;).on(&quot;change&quot;, browser_sync.reload);//&#x76D1;&#x542C;html&#x6587;&#x4EF6;&#xFF0C;&#x5B9E;&#x65F6;&#x5237;&#x65B0;&#x6D4F;&#x89C8;&#x5668;
});
</code></pre>
                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../md/git.html" class="navigation navigation-prev " aria-label="Previous page: Git的使用"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../md/gitbook.html" class="navigation navigation-next " aria-label="Next page: gitbook的使用"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sectionx/sectionx.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-expandable-chapters/expandable-chapters.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"sectionx":{},"expandable-chapters":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
